<template>
	<view class="ts-flex ts-padding">		
			<view class="ts-swiper-msg">
				<view class="ts-swiper-msg-icon">
					<slot name="icon">
            <image :src="defaultIcon" mode="widthFix"></image>
					</slot>
				</view>
				<swiper :vertical="vertical" autoplay="true" circular="true" interval="3000">
          <block v-for="(item,index) in messages" :key="index">
					<swiper-item>
						<text>{{item}}</text>
					</swiper-item>
				</block>
				</swiper>
			</view>		
	</view>
</template>

<script>

	export default {
    data() {
    	return {
    		defaultIcon: ''
    	}
    },
		props: {
      vertical:{
        type:Boolean,
        default:true,
      },
			messages: {
				type: Array,
				default() {
					return [];
				}
			}
		}

	}
</script>

<style>
	.ts-swiper-msg {
    display: flex;
    flex-direction: row;
		width: 100%;
		padding: 12upx 0;
		flex-wrap: nowrap;
	}

	.ts-swiper-msg-icon {
		width: 50upx;
		margin-right: 20upx;
	}

	.ts-swiper-msg-icon image {
		width: 100%;
		flex-shrink: 0;
	}

	.ts-swiper-msg swiper {
		width: 100%;
		height: 50upx;
	}

	.ts-swiper-msg swiper-item {
		line-height: 50upx;
	}
</style>
